<template>
    <div id="Diamond">
        <mt-header fixed title="我的获赠记录">
            <mt-button icon="back" @click.native="$router.go(-1);" slot="left">返回</mt-button>
        </mt-header>
        <div class="showResult lay" style="margin-top:0">
            <div class="showResultTitle"> 查询结果 </div>
            <div class="record" :key="index" v-for="(item,index) in group.arr">
                <div style="width:160px;"><span class="title"><i class="iconfont icon-shijian4"></i> 时间</span><br/><span>{{(item.CreateTime)}}</span></div>
                <div style="flex:1"><span class="title"><i class="iconfont icon-huodong2"></i> 获赠用户</span><br/><span>{{item.PlayName}}</span></div>
                <div style="flex:1"><span class="title"><i class="iconfont icon-zuanshi"></i> 钻石数量</span><br/><span>{{item.Amount}}</span></div>
            </div>
            <div v-if="group.arr.length==0" class="noresult">
                无符合条件的数据
            </div>
            <div v-if=" group.arr.length>0">
                <div style="margin:10px px">
                    <mt-button type="primary" size="large" @click.native="loadMoreRecord" v-if="group.nextPage<group.totalPages">加载更多</mt-button>
                    <mt-button type="default" size="large" v-else>已无更多数据</mt-button>
                </div>
            </div>
        </div>
        <mt-popup v-model="popupVisible" :modal="false" position="top" pop-transition="popup-fade">
            <div class="popcontent">{{msg}}
            </div>
        </mt-popup>
    </div>
</template>
<script>
    import {
        MessageBox
    } from 'mint-ui';
    import {
        mapMutations
    } from "vuex";
    export default {
        name: "index",
        watch: {
            selected(curVal, oldVal) {　　　　　　　　　　
                if (curVal == '赠送用户钻石记录') {
                    this.group.arr = [];
                    this.group.nextPage = 0;
                    this.getGiveUserRecord();
                }　　　　　　
            }
        },
        data() {
            return {
                userShow: false,
                ScrollState: false,
                selected: "赠送用户钻石",
                msg: '',
                sendTypeStr: "赠送用户钻石",
                recordTypeStr: "赠送用户记录",
                userBz: "",
                popupVisible: false,
                user: {
                    nPlayerId: '123321',
                    szNickName: 'cs',
                    consumeMoney: '999',
                    sendnum: "",
                    beizhu: "",
                    paymoney: ""
                },
                group: {
                    arr: [],
                    totalCount: 0,
                    nextPage: 0,
                    totalPages: 0
                }
            }
        },
        methods: {
            ...mapMutations({
                editBalanceMoney: "editBalanceMoney"
            }),
            getInfo() {
                let getPatam = {
                    nPlayerId: parseInt(this.userBz)
                }
                //  console.log(getPatam);
                let that = this;
                this.$http.post(`${this.baseUrl}/user/GetUserInfo`, getPatam).then(response => {
                    //  console.log(response);
                    that.popupVisible = true;
                    let data = response.data;
                    // that.msg = data.msg;
                    // let time = setTimeout(function() {
                    //     that.popupVisible = false;
                    //     that.msg = "";
                    //     clearTimeout(time);
                    // }, that.SETTIME);
                    if (data.code == 1) {
                        this.user = response.data.body;
                        this.userShow = true;
                    } else {
                        MessageBox("提示", data.msg)
                    }
                })
            },
            send() {
                let getParam = {
                    'functionname': "GiftUserDiamond",
                    body: JSON.stringify({
                        nPlayerId: parseInt(this.userBz),
                        rechargeValue: parseInt(this.user.sendnum),
                        consumeMoney: parseInt(this.user.paymoney),
                        strRemark: this.user.beizhu
                    })
                }
                //  console.log(getParam);
                let that = this;
                this.$http.post(`${this.baseUrl}/Main/AddData`, getParam).then(response => {
                    //  console.log(response);
                    let data = response.data;
                    // this.msg = data.msg;
                    // this.popupVisible = true;
                    // let time = setTimeout(function() {
                    //     that.popupVisible = false;
                    //     that.msg = "";
                    //     clearTimeout(time);
                    // }, this.SETTIME);
                    if (data.code == 1) {
                        that.editBalanceMoney({
                            balanceMoney: parseInt(that.user.sendnum)
                        });
                        sessionStorage.setItem('info', JSON.stringify(that.$store.state.user));
                        this.user.sendnum = ""
                        this.user.paymoney = ""
                        this.user.beizhu = ""
                    } else {
                        MessageBox("提示", data.msg)
                    }
                })
            },
            handleScroll: function() {
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                if (scrollTop == 0) {
                    this.ScrollState = false;
                    document.getElementById('Diamond').style.paddingTop = 0 + "px"
                }
                if (scrollTop > 0) {
                    document.getElementById('Diamond').style.paddingTop = this.H + "px";
                    this.ScrollState = true;
                }
            },
            getRecord(params) {
                let that = this;
                this.$http.get(`${this.baseUrl}/Main/GetData`, params).then(response => {
                   // console.log(response);
                    let data = response.data;
                    // that.popupVisible = true;
                    // that.msg = data.msg;
                    // let time = setTimeout(function() {
                    //     that.popupVisible = false;
                    //     that.msg = "";
                    //     clearTimeout(time);
                    // }, that.SETTIME);
                    if (data.code == 1) {
                        that.group.arr = that.group.arr.concat(data.body);
                        that.group.nextPage = that.group.nextPage + 1;
                        that.group.totalPages = Math.ceil(data.totalCount / that.PAGESIZE);
                        that.group.totalCount = data.totalCount;
                        // console.log(data);
                    }
                })
            },
            getGiveUserRecord: function() {
                //  console.log(111);
                let getInfoData = {
                    params: {
                        'functionname': "GetGiftDiamondRecord",
                        body: JSON.stringify({
                            pageIndex: 0,
                            pageSize: this.PAGESIZE,
                            GiftType: 3
                        })
                    }
                }
                this.getRecord(getInfoData);
            },
            loadMoreRecord() {
                let getInfoData = {
                    params: {
                        'functionname': "GetGiftDiamondRecord",
                        body: JSON.stringify({
                            pageIndex: this.group.nextPage,
                            pageSize: this.PAGESIZE,
                            GiftType: 3
                        })
                    }
                }
                this.getRecord(getInfoData);
            }
        },
        created() {
            this.getGiveUserRecord()
        },
        mounted() {
            document.body.style.background = "#fffbef";
        },
        destroyed() {}
    }
</script>

<style lang="scss" scoped>
    .popcontent {
        height: 100%;
        width: 100%;
        height: 40px;
        display: block;
        /* background: #eee; */
        color: #fff;
        background: rgba(0, 0, 0, 0.8);
        line-height: 40px;
        text-align: center;
    }
    .mint-popup-top {
        width: 100%;
        border-left: 2px solid #fdfcfc;
    }
    .userInformation {
        margin-top: 50px;
        padding: 0 10px 100px 10px;
        background: #efefef;
    }
    .record {
        display: flex;
        text-align: left;
        margin-bottom: 20px;
        background: #fff;
        div {
            overflow: hidden;
            padding: 10px 0;
            padding-left: 5px;
            font-size: 12px;
            line-height: 2;
            color: #9e9e9e;
            .title {
                color: #634747;
            }
        }
    }
</style>
